<template>
  <div class="centermap">
    <div class="mapwrap">
        <div class="quanguo" v-if="code !== 'wj'">
          武进
        </div>

        <Echart id="CenterMap" :options="options" ref="CenterMap" :displayShow="displayShow"/>
    </div>
  </div>
</template>

<script>
const geoJSON = {
  'wj': require('../../../public/zj-geojson/zj-simp.json'),
  'zj-location':require('../../../public/zj-geojson/zj-location.json')
};
export default {
  props: {
    displayShow: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      options: {},
      code: "wj",
      echartBindClick: false
    };
  },
  created() { },

  mounted() {
    echarts.registerMap('wj', { geoJSON: geoJSON['wj'] });
    this.init("wj")
    this.mapclick()

  },
  methods: {
    init(name) {
      let top = 20;
      let zoom = 1.5;

      this.options = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: true,
        },
        visualMap: {
          show:false,
          min: 0,
          max: 20,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#0072FF', '#00EAFF', '#01AAFF']
          },
        },
        dataRange: {
          show:false,
          splitList: geoJSON['zj-location'] //各省地图颜色，在data中插入对应的color即可 {"name": "南海诸岛", "value": 15000,color: '#cfc5de'} color：自定义颜色值
        },
        series: [
          {
            name: "MAP",
            type: "map",
            map: name,
            mapType: '常州武进',
            aspectScale: 1,
            emphasis: {
              label: {
                show: true
              }
            },
            data: geoJSON['zj-location'],
            zoom: zoom,
            top: top,
            tooltip: {
              show: true,
              formatter: function (params) {
                return params.name;
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            label: {
              show: true,
              color: "#FFF",
              fontSize: 15 ,
              fontWeight: 'bold' ,
              offset:[0,10],
              formatter: function (val) {
                if (val.data !== undefined) {
                  return val.name.slice(0, 3);
                } else {
                  return "";
                }
              },
            },

          },
        ],
      };
    },
    message(text) {
      this.$Message({
        text: text,
        type: 'warning'
      })
    },
    mapclick() {
      let that=this
      this.$refs.CenterMap.chart.on("click", (params) => {
        console.log(params);
        if(params.data){
          that.$store.state.tabChangeData={
            displayTab:4
          }
          let name = params.data.name
          let mapData=params.data.mapData
          if (mapData){
            that.$store.state.mapChangeData={
              url:mapData.layerUrl,
              name:name,
              params:{
                LAYERS: mapData.layer
              },
              location:mapData.latLon,
              zoom:mapData.zoom
            }
            if (mapData['33X']){
              let data33X=mapData['33X']
              console.log(data33X)
              that.$store.state.tabFourData={
                one:require('@/assets/'+data33X.one),
                two:require('@/assets/'+data33X.two),
                three:require('@/assets/'+data33X.three)
              }
            }
            if (mapData['imgUrl']){
              let imgUrl=mapData['imgUrl']
              that.$store.state.centerBottomData={
                url:require('@/assets/'+imgUrl)
              }
            }
          }else {
            // if (name==="滆湖"){
            //   that.$store.state.mapChangeData={
            //     url:"http://218.93.116.192:8087/geoserver/xf/wms",
            //     name:"两湖",
            //     params:{
            //       LAYERS: "xf:gh_ppt_xthdbk"
            //     },
            //     location:[119.84, 31.706],
            //     zoom:12.4
            //   }
            //   that.$store.state.tabFourData={
            //     one:require("../../assets/img/datav/95/33X/3_1.png"),
            //     two:require("../../assets/img/datav/95/33X/3_2.png"),
            //     three:require("../../assets/img/datav/95/33X/3_X.png")
            //   }
            //   that.$store.state.centerBottomData={
            //     url:require('@/assets/img/datav/cyxz/centerOne/xth.png')
            //   }
            // }
          }



        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.centermap {
  margin-bottom: 30px;
  .mapwrap {

    height: 250px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
      0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
